<template>
  <div class="app-container">
    <Ht-search-form
      :dictMap="dictMap"
      :queryParams="queryParams"
      :outputQueryParams="queryParams"
      :formOptions="formOptions"
      :advOptions="[]"
      permission="user:credential:view"
    ></Ht-search-form>

    <ht-table
      ref="dataTable"
      :dictMap="dictMap"
      :queryParams="queryParams"
      :tableBindColumns="tableBindColumns"
      :opButtonList="opButtonList"
      :reqConfig="reqConfig"
    >
      <template v-slot:operate>
        <el-table-column
          :label="$t('common.operation')"
          align="left"
          width="120"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              slot="reference"
              v-if="scope.row.type == 2"
              @click="handleDelete(scope.row)"
              v-hasPermi="['user:credential:remove']"
            >
              {{ $t("common.delete") }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ht-table>

    <!-- 委任配置对话框 -->
    <div v-if="open2">
      <add-appoint
        :id="curUserId"
        :title="title"
        :open2="open2"
        :deptId2="deptId2"
        :form2="form2"
        :deptParams="deptParams"
        @changeTypeInfoOpen="changeTypeInfoOpen2"
      ></add-appoint>
    </div>
  </div>
</template>
<script>
import { listPageMixin } from "@/libs/listPageMixin";
import {
  apiUrlConfig,
  search,
  remove,
  saveAppoint,
} from "@/api/authority_app/userDeptRole/index";
import { userRolesByUserId } from "@/api/authority_app/role/roleInfo";
import { selectDeptByIdVue } from "@/api/authority_app/dept";
import addAppoint from "@/views/system/userDeptRole/addAppoint";

export default {
  name: "index",
  mixins: [listPageMixin],
  components: { addAppoint },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open2: false,
      // 查询参数
      queryParams: {
        orderByColumn: "",
        isAsc: "asc",
        userName: "",
        dictType: "",
      },
      form2: {
        type: Object,
        default: {
          id: "",
          userName: "",
          deptId: "",
          roleIds: [],
          oldDeptId: "",
        },
      },
      deptId2: [],
      deptOptions2: [],
      // 角色选项
      roleOptions: [],
      // 机构参数
      deptParams: {
        userId: "",
        deptId: "",
        deptCode: "",
        tenantCode: "",
        name: "",
      },
      curUserId: "",
      reqConfig: apiUrlConfig,
      searchFormDictList: ["USER_CREDENTIAL_TYPE"],
      // 列信息
      tableBindColumns: [
        {
          label: this.$t("authority.userDeptRole.form.userId"),
          prop: "userId",
        },
        {
          label: this.$t("authority.userDeptRole.form.userName"),
          prop: "userName",
          sortable: false,
        },
        // {label: `机构ID`, prop: "deptId"},
        {
          label: this.$t("authority.userDeptRole.form.deptName"),
          prop: "deptName",
          sortable: false,
        },
        {
          label: this.$t("authority.userDeptRole.form.type"),
          prop: "type",
          dictCode: "USER_CREDENTIAL_TYPE"
        },
        {
          label: this.$t("authority.userDeptRole.form.roleNames"),
          prop: "roleNames",
          sortable: false,
          // formatter: (row, value, index) => {
          //   let va = "";
          //   for (let index in row.roleList) {
          //     if (index < row.roleList.length - 1) {
          //       va += row.roleList[index].roleName + ",";
          //     } else {
          //       va += row.roleList[index].roleName;
          //     }
          //   }
          //   return va;
          // },
        },
      ],
      formOptions: [],
    };
  },
  mounted() {
    const formOptions = [
      {
        type: "input",
        prop: "userName",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.userDeptRole.form.userName"),
          placeholder: this.$t("authority.userDeptRole.rules.userNamePLH"),
        },
      },
      {
        type: "input",
        prop: "deptName",
        defaultAttr: {
          size: "small",
          label: this.$t("authority.userDeptRole.form.deptName"),
          placeholder: this.$t("authority.userDeptRole.rules.deptNamePLH"),
        },
      },
      // {
      //   label: "字典下拉", // 搜索项描述
      //   placeholder: "请输入组织名称", // placeholder
      //   modelName: "deptName", // v-model
      //   componentType: "search-select-dict", // 组件类型
      //   dictName: "credential_type",
      //   selectOptionList: [],
      // },
      // {
      //   label: "获取数据下拉", // 搜索项描述
      //   placeholder: "请选择组织名称", // placeholder
      //   modelName: "test", // v-model
      //   componentType: "search-select", // 组件类型
      //   selectOptionList: [
      //     { apple: "xxxx", b: "1" },
      //     { apple: "xx", b: "2" },
      //   ],
      //   optionsLabel: "apple",
      //   optionsValue: "b",
      // },
    ];
    const advOptions = [
      // // 普通搜索
      // {
      //   label: "测试高级1", // 搜索项描述
      //   placeholder: "请输入用户名", // placeholder
      //   modelName: "userName", // v-model
      //   size: "small",
      //   componentType: "search-input", // 组件类型
      // },
      // {
      //   label: "测试高级2", // 搜索项描述
      //   placeholder: "请输入组织名称", // placeholder
      //   modelName: "deptName", // v-model
      //   size: "small",
      //   componentType: "search-input", // 组件类型
      // },
      // {
      //   label: "高级字典下拉", // 搜索项描述
      //   placeholder: "请输入组织名称", // placeholder
      //   modelName: "deptName", // v-model
      //   size: "small",
      //   componentType: "search-select-dict", // 组件类型
      //   dictName: "credential_type",
      //   selectOptionList: [],
      // },
      // {
      //   label: "高级数据下拉", // 搜索项描述
      //   placeholder: "请选择组织名称", // placeholder
      //   modelName: "test", // v-model
      //   size: "small",
      //   componentType: "search-select", // 组件类型
      //   selectOptionList: [
      //     { apple: "xxxx", b: "1" },
      //     { apple: "xx", b: "2" },
      //   ],
      //   optionsLabel: "apple",
      //   optionsValue: "b",
      // },
    ];
    // const { result } = await this.getDictsList(["sys_normal_disable"]);
    // this.$set(formOptions[2], "selectOptionList", result.sys_normal_disable);
    this.formOptions = formOptions;
    // this.advOptions = advOptions;
  },
  methods: {
    listReq(pageParams) {
      return search(pageParams);
    },
    //删除
    handleDelete(obj) {
      this.$confirm(
        this.$t("authority.userDeptRole.rules.deleteTip", {
          val: obj.userName,
        }),
        this.$t("authority.userDeptRole.form.warning"),
        {
          confirmButtonText: this.$t("common.confirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(function () {
          let data = {
            id: obj.id,
          };
          console.log("data:", obj.id);
          return remove(data);
        })
        .then(() => {
          this.doQuery();
          this.msgSuccess(this.$t("common.deleteSuccess"));
        })
        .catch((action) => {});
    },

    /** 编辑按钮操作 */
    handleUpdate(row) {
      this.reset2();
      this.form2.userName = row.userName;
      this.curUserId = row.userDept.userId;
      this.form2.userId = row.userDept.userId;
      this.deptId2 = [row.userDept.deptId];
      this.form2.oldDeptId = row.userDept.deptId;
      selectDeptByIdVue(row.userDept.deptId).then((response) => {
        this.deptParams.deptCode = response.result.deptCode;
        this.deptParams.tenantCode = response.result.tenantCode;
        this.open2 = true;
        this.title = this.$t("authority.userDeptRole.form.appointManagement");
      });
      userRolesByUserId(row.userDept.userId, row.userDept.deptId).then(
        (response) => {
          response.result.forEach((element) => {
            this.form2.roleIds.push(element.id);
          });
        }
      );
    },

    // 表单重置
    reset2() {
      this.form2 = {
        id: "",
        userName: "",
        deptId: "",
        roleIds: [],
        oldDeptId: "",
      };
      this.resetForm("form2");
    },

    changeTypeInfoOpen2(open) {
      this.open2 = open;
      if (!this.open2) {
        this.doQuery();
      }
    },
  },
};
</script>
